<template>
	<view class="rent-car-page">
		<!-- 主要内容 -->
		<scroll-view scroll-y class="content">
			<view style="padding: 25rpx;">
				<!-- 科目选择卡片 -->
				<view class="subject-card">
					<view v-for="(subject, index) in subjects" :key="index"
						:class="['subject-item', activeSubject === index ? 'active' : '']"
						@click="selectSubject(index)">
						<text class="subject-name">{{subject.name}}</text>
						<text class="subject-desc">{{subject.desc}}</text>
					</view>
				</view>
				<!-- 考试地点选择 -->
				<view class="card location-card" v-if="false">
					<view class="card-header">
						<uni-icons type="map-pin" size="18" color="#ff80ab"></uni-icons>
						<text>选择考试地点</text>
					</view>
					<view class="card-body">
						<picker mode="selector" :range="locations" range-key="name" @change="locationChange">
							<view class="picker-item">
								<text class="picker-label">考试地点</text>
								<text class="picker-value">{{selectedLocation.name}}</text>
								<uni-icons type="forward" size="18" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
				<!-- 日期选择 -->
				<view class="card date-selection">
					<view class="card-header">
						<uni-icons type="calendar" size="18" color="#ff80ab"></uni-icons>
						<text>选择租车日期</text>
					</view>
					<view class="card-body">
						<picker mode="date" :value="rentDate" :start="startDate" :end="endDate" @change="dateChange">
							<view class="picker-item">
								<text class="picker-label">租车日期</text>
								<text class="picker-value">{{rentDate}}</text>
								<uni-icons type="forward" size="18" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
				</view>

				<!-- 时段选择 -->
				<view class="card time-selection" v-if="false">
					<view class="card-header">
						<uni-icons type="clock" size="18" color="#ff80ab"></uni-icons>
						<text>选择训练时段</text>
					</view>
					<view class="card-body">
						<view class="time-grid">
							<view v-for="(time, index) in timeSlots" :key="index"
								:class="['time-item', activeTime === index ? 'active' : '']" @click="selectTime(index)">
								<text>{{time.start}} - {{time.end}}</text>
								<text v-if="time.disabled" class="full-text">已约满</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 车辆选择 -->
				<view class="card car-selection" v-if="false">
					<view class="card-header">
						<uni-icons type="car" size="18" color="#ff80ab"></uni-icons>
						<text>选择训练车辆</text>
					</view>
					<view class="card-body">
						<view v-for="(car, index) in cars" :key="index"
							:class="['car-item', selectedCar === index ? 'active' : '']" @click="selectCar(index)">
							<image :src="car.image" class="car-image"></image>
							<view class="car-detail">
								<text class="car-model">{{car.model}}</text>
								<text class="car-number">{{car.number}}</text>
								<text class="car-price">¥{{car.price}}/小时</text>
								<text class="car-desc">{{car.desc}}</text>
							</view>
							<view class="radio">
								<view v-if="selectedCar === index" class="radio-inner"></view>
							</view>
						</view>
					</view>
				</view>

				<!-- 时长选择 -->
				<view class="card duration-selection">
					<view class="card-header">
						<uni-icons type="time" size="18" color="#ff80ab"></uni-icons>
						<text>选择租车时长</text>
					</view>
					<view class="card-body">
						<view class="duration-grid">
							<view v-for="(hour, index) in hours" :key="index"
								:class="['hour-item', selectedHour === index ? 'active' : '']"
								@click="selectHour(index)">
								<text>{{hour}}小时</text>
								<!-- <text class="hour-price">¥{{hour * selectedCarObj.price}}</text> -->
							</view>
						</view>
					</view>
				</view>

				<!-- 保险选择 -->
				<view class="card insurance-selection">
					<view class="card-header">
						<uni-icons type="shield" size="18" color="#ff80ab"></uni-icons>
						<text>保险服务</text>
					</view>
					<view class="card-body">
						<view class="insurance-item">
							<view class="insurance-info">
								<text class="insurance-name">驾考训练保险</text>
								<text class="insurance-desc">保障训练期间的人身和车辆安全</text>
								<text class="insurance-price">¥20</text>
							</view>
							<switch :checked="insurance" color="#ff80ab" @change="toggleInsurance" />
						</view>
					</view>
				</view>
				<!-- 温馨提示 -->
				<view class="tip-card">
					<view class="tip-header">
						<uni-icons type="info" size="18" color="#ff9f43"></uni-icons>
						<text>温馨提示</text>
					</view>
					<view class="tip-content">
						<text>1. 请根据您的实际考试科目选择租车服务</text>
						<text>2. 科目二建议选择手动挡车辆，科目三可选择自动挡</text>
						<text>3. 租车时间建议安排在考试前1-3天进行适应性训练</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="footer">
			<view class="price-info">
				<text class="label">预估费用：</text>
				<text class="price">¥{{totalFee}}</text>
			</view>
			<button class="next-btn" :disabled="!canSubmit" @click="goToPayment">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// 获取当前日期和一周后的日期
			const today = new Date()
			const nextWeek = new Date()
			nextWeek.setDate(today.getDate() + 7)

			return {
				subjects: [{
						id: 1,
						name: '科目二',
						desc: '场地驾驶技能考试',
						icon: '/static/image/kemu.png'
					},
					{
						id: 2,
						name: '科目三',
						desc: '道路驾驶技能考试',
						icon: '/static/image/kemusan.png'
					}
				],
				activeSubject: -1,
				locations: [{
						id: 1,
						name: '广州市天河区驾考中心',
						address: '天河区华观路1732号'
					},
					{
						id: 2,
						name: '广州市番禺区驾考中心',
						address: '番禺区市广路12号'
					},
					{
						id: 3,
						name: '广州市白云区驾考中心',
						address: '白云区嘉禾联边工业区'
					}
				],
				selectedLocation: {
					name: '请选择考试地点'
				},
				examInfo: {
					subject: '科目二',
					date: '2023年6月20日',
					time: '上午场 (08:00-12:00)',
					location: '广州市天河区驾考中心'
				},
				rentDate: this.formatDate(today),
				startDate: this.formatDate(today),
				endDate: this.formatDate(nextWeek),
				timeSlots: [{
						start: '08:00',
						end: '09:30',
						disabled: false
					},
					{
						start: '09:30',
						end: '11:00',
						disabled: false
					},
					{
						start: '11:00',
						end: '12:30',
						disabled: true
					},
					{
						start: '13:30',
						end: '15:00',
						disabled: false
					},
					{
						start: '15:00',
						end: '16:30',
						disabled: false
					},
					{
						start: '16:30',
						end: '18:00',
						disabled: false
					},
					{
						start: '18:00',
						end: '19:30',
						disabled: false
					},
					{
						start: '19:30',
						end: '21:00',
						disabled: true
					}
				],
				activeTime: -1,
				
				selectedCar: -1,
				hours: [1, 2, 3,4,5,6],
				selectedHour: -1,
				insurance: true
			}
		},
		computed: {
			canSubmit() {
				return this.activeSubject !== -1 && this.selectedLocation.id
			},
			// selectedCarObj() {
			// 	return this.cars[this.selectedCar] || {
			// 		price: 0
			// 	}
			// },
			totalFee() {
				if (this.selectedCar === -1 || this.selectedHour === -1) return 0
				const carFee = this.selectedCarObj.price * (this.selectedHour + 1)
				const insuranceFee = this.insurance ? 20 : 0
				return carFee + insuranceFee
			},
			canSubmit() {
				return this.activeTime !== -1 && this.selectedCar !== -1 && this.selectedHour !== -1
			}
		},
		methods: {
			// 选择科目
			selectSubject(index) {
				this.activeSubject = index
			},

			// 选择考试地点
			locationChange(e) {
				this.selectedLocation = this.locations[e.detail.value]
			},
			// 格式化日期
			formatDate(date) {
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				return `${year}-${month}-${day}`
			},

			// 日期改变
			dateChange(e) {
				this.rentDate = e.detail.value
				// 实际项目中可以根据日期加载可预约时段
			},

			// 选择时段
			selectTime(index) {
				if (this.timeSlots[index].disabled) return
				this.activeTime = index
			},

			// 选择车辆
			selectCar(index) {
				this.selectedCar = index
			},

			// 选择时长
			selectHour(index) {
				this.selectedHour = index
			},

			// 切换保险
			toggleInsurance(e) {
				this.insurance = e.detail.value
			},

			// 返回
			goBack() {
				uni.navigateBack()
			},

			// 跳转到支付页面
			goToPayment() {
				this.$emit('canSubmit', true)
				if (!this.canSubmit) return

				const reservationData = {
					examInfo: this.examInfo,
					rentDate: this.rentDate,
					timeSlot: this.timeSlots[this.activeTime],
					car: this.selectedCarObj,
					hours: this.selectedHour + 1,
					insurance: this.insurance,
					totalFee: this.totalFee
				}

				// 实际项目中可以先将数据提交到服务器生成订单
				// 这里简单演示跳转并传递数据
				uni.navigateTo({
					url: '/pages/driving/rentPayment?data=' + encodeURIComponent(JSON.stringify(reservationData))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tip-card {
		background-color: #fff8e6;
		border-radius: 12px;
		padding: 15px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

		.tip-header {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			font-size: 16px;
			font-weight: bold;
			color: #fa8c16;

			text {
				margin-left: 8px;
			}
		}

		.tip-content {
			display: flex;
			flex-direction: column;

			text {
				font-size: 13px;
				color: #666;
				margin-bottom: 8px;
				line-height: 1.6;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	.subject-card {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin-bottom: 20px;

		.subject-item {
			background-color: #fff;
			border-radius: 12px;
			padding: 20px 15px;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			border: 2px solid transparent;

			.subject-icon {
				width: 200rpx;
			}

			.subject-name {
				font-size: 18px;
				font-weight: bold;
				color: #333;
				margin-bottom: 5px;
			}

			.subject-desc {
				font-size: 12px;
				color: #999;
			}

			&.active {
				border-color: #ff80ab;
				background-color: #f9f0ff;

				.subject-name {
					color: #ff80ab;
				}
			}
		}
	}

	.rent-car-page {
		// height: 1700rpx;
		display: flex;
		flex-direction: column;
		background-color: #f5f6fa;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px 20px;
			background: linear-gradient(135deg, #ff80ab 0%, #ff4081 100%);
			color: #fff;

			.title {
				font-size: 18px;
				font-weight: bold;
			}
		}

		.content {
			flex: 1;
		}

		.card {
			background-color: #fff;
			border-radius: 12px;
			margin-bottom: 15px;
			overflow: hidden;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

			.card-header {
				display: flex;
				align-items: center;
				padding: 15px;
				border-bottom: 1px solid #f0f0f0;
				font-size: 16px;
				font-weight: bold;
				color: #333;

				text {
					margin-left: 8px;
				}
			}

			.card-body {
				padding: 15px;
			}
		}

		.exam-info {
			.info-row {
				display: flex;
				margin-bottom: 10px;

				&:last-child {
					margin-bottom: 0;
				}

				.label {
					width: 80px;
					color: #666;
				}

				.value {
					flex: 1;
					color: #333;
				}
			}
		}

		.date-selection {
			.picker-item {
				display: flex;
				align-items: center;
				padding: 12px 0;

				.picker-label {
					flex: 1;
					color: #666;
				}

				.picker-value {
					color: #333;
					margin-right: 10px;
				}
			}
		}

		.time-selection {
			.time-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10px;

				.time-item {
					padding: 12px 5px;
					border-radius: 8px;
					background-color: #f5f6fa;
					text-align: center;
					font-size: 14px;
					color: #333;
					position: relative;
					overflow: hidden;

					.full-text {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background-color: rgba(0, 0, 0, 0.5);
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 12px;
					}

					&.disabled {
						opacity: 0.6;
					}

					&.active {
						background: linear-gradient(135deg, #2e86de, #1e90ff);
						color: #fff;
						box-shadow: 0 5px 15px rgba(46, 134, 222, 0.3);
					}
				}
			}
		}

		.car-selection {
			.car-item {
				display: flex;
				padding: 12px;
				margin-bottom: 10px;
				border-radius: 8px;
				border: 1px solid #f0f0f0;
				position: relative;

				&:last-child {
					margin-bottom: 0;
				}

				&.active {
					border-color: #ff80ab;
					background-color: #f9f0ff;
				}

				.car-image {
					width: 100px;
					height: 70px;
					border-radius: 6px;
					margin-right: 12px;
					object-fit: cover;
				}

				.car-detail {
					flex: 1;

					.car-model {
						display: block;
						font-size: 16px;
						font-weight: bold;
						color: #333;
						margin-bottom: 3px;
					}

					.car-number {
						display: block;
						font-size: 14px;
						color: #666;
						margin-bottom: 3px;
					}

					.car-price {
						display: block;
						font-size: 14px;
						color: #ff4d4f;
						margin-bottom: 3px;
					}

					.car-desc {
						display: block;
						font-size: 12px;
						color: #999;
					}
				}

				.radio {
					width: 20px;
					height: 20px;
					border-radius: 50%;
					border: 1px solid #d9d9d9;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 10px;

					.radio-inner {
						width: 12px;
						height: 12px;
						border-radius: 50%;
						background-color: #ff80ab;
					}
				}
			}
		}

		.duration-selection {
			.duration-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 10px;

				.hour-item {
					padding: 15px 5px;
					border-radius: 8px;
					background-color: #f5f6fa;
					text-align: center;
					font-size: 14px;
					color: #333;
					display: flex;
					flex-direction: column;

					.hour-price {
						font-size: 12px;
						color: #ff4d4f;
						margin-top: 5px;
					}

					&.active {
						background: linear-gradient(135deg, #ff80ab, #ff80ab);
						color: #fff;

						.hour-price {
							color: #fff;
						}
					}
				}
			}
		}

		.insurance-selection {
			.insurance-item {
				display: flex;
				align-items: center;

				.insurance-info {
					flex: 1;

					.insurance-name {
						display: block;
						font-size: 16px;
						font-weight: bold;
						color: #333;
						margin-bottom: 3px;
					}

					.insurance-desc {
						display: block;
						font-size: 12px;
						color: #999;
						margin-bottom: 3px;
					}

					.insurance-price {
						display: block;
						font-size: 14px;
						color: #ff4d4f;
					}
				}

				switch {
					transform: scale(0.8);
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 60px;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 15px;
			border-top: 1px solid #f0f0f0;

			.price-info {
				flex: 1;

				.label {
					font-size: 14px;
					color: #666;
				}

				.price {
					font-size: 20px;
					color: #ff4d4f;
					font-weight: bold;
				}
			}

			.next-btn {
				width: 150px;
				height: 40px;
				line-height: 40px;
				background: linear-gradient(135deg, #ff80ab 0%, #ff4081 100%);
				color: #fff;
				border-radius: 20px;
				font-size: 16px;

				&[disabled] {
					opacity: 0.6;
				}
			}
		}
	}
</style>